<template>
	<view>
		<view v-for="(itme,index) in carts" class="uni-flex uni-row" :class="{'chenck':one==index}"
			@click="dianji(index)">
			<view class="text uni-flex"
				style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
				<image :src="image" style="width: 150rpx;height: 150rpx;"></image>
			</view>
			<view class="uni-flex uni-column"
				style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
				<view class="text" style="height: 120rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;">
					这个是商品描述
					<view class="">
						价格：{{itme.price}}
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="text" style="-webkit-flex: 1;flex: 1;">
						<button class="mini-btn" size="mini" @click="jian(index)">-</button>
						<button class="mini-btn" size="mini">{{itme.goodsNum}}</button>
						<button class="mini-btn" size="mini" @click="add(index)">+</button>
					</view>
					<view class="text" style="-webkit-flex: 1;flex: 1;" @click="addcheck(index)">选择</view>
				</view>
			</view>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">收货地址</view>
			<picker @change="PickerChange1" :value="index1" :range="picker1">
				<view class="picker">
					{{index1>-1?picker1[index1]:'点击选择收货地址'}}
				</view>
			</picker>
		</view>
		<view class="uni-flex uni-row dibulan">
			<view class="">
				<view class="">
					总价：{{totle}}
				</view>
			</view>
			<view class="">
				<button class="mini-btn" type="primary" size="mini" @click="submit">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.$req.getCarData(0, 3).then(res => {
				//获取到购物车信息
				this.carts = res.data.list;
				this.carts.map(item => {
					item.check = false;
				})
			})
		},
		data() {
			return {
				from: "",
				image: "http://file.loveliuran.cn/upload/20210520/5bb096cd02324c4498c4e99d1e7fc8ff.jpg",
				carts: [],
				one: 0,
				list:[],
				index1:-1,
				picker1: ['1', '2', '3'],
			}
		},
		methods: {
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			getCarts() {
				this.$req.getUserCarts().then(res => {
					res.data.Map(item => {
						item.check = false;
					})
				})
			},
			add(index) {
				this.carts[index].goodsNum += 1
			},
			jian(index) {
			
				this.carts[index].goodsNum -= 1
				
			},
			addcheck(index) {
				this.carts[index].check = this.carts[index].check === true ? false : true;
				console.log(this.carts[index].check)
			},
			submit() {
				for(let i = 0;i<this.carts.length;i++){
					if(this.carts[i].check){
						this.list.push({
							specsId:this.carts[i].specsId,
							goodsId:this.carts[i].goodsId,
							addressId:this.picker1[this.index1],
							price:this.carts[i].price,
							buyNumber:this.carts[i].goodsNum
						})
					}
				}
				var thiSize = this.list.length;
				if(thiSize>0){
					this.$req.orderCommit(this.list).then(res=>{
						console.log(res);
						uni.navigateTo({
							url:'pay/pay'
						})
						uni.setStorageSync("tKey",res)
						// for(let i=0;i<thiSize;i++){
						// 	//删除购物车
						// 	this.$req.delCar(this.list[i].goodsId,this.list[i].specsId).then(res=>{
						// 		console.log("删除购物车中一件商品")
						// 	})
						// }
					})
				}else{
					uni.showToast({
						title:"未选中任何商品，请选择"
					})
				}
			},
			dianji(index) {
				this.one = 1 == index ? index : 0
			}
		},
		computed: {
			totle: {
				get() {
					let t = 0
					if (this.carts.length > 0) {
						this.carts.map(item => {
							console.log(item)
							if (item.check) {
								t += (item.price * item.goodsNum)
							}
						})
					}
					console.log(t)
					return t;
				},
				set(v){}
			}
		},
	}
</script>

<style>
	.dibulan {
		border: 1px red solid;
		position: fixed;
		bottom: 51px;
	}

	.chenck {
		border: 1px solid #000000;
	}
</style>
